<template>
  <div class="home">
    <img @click="gotoAbout" alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// 引入单独的vuex命名空间
// const { mapState } = createNamespacedHelpers('moduleA')

export default {
  name: 'home',
  data () {
    return {
      info: ''
    }
  },
  computed: {
    // 指定vuex模块的state
    ...mapState('moduleA', [
      'userInfo'
    ]),
    // ...mapState([
    //   'userInfo'
    // ])
  },
  watch: {
    userInfo(info) {
      console.log(info)
    }
  },
  methods: {
    // 指定vuex的mutation模块
    ...mapMutations('moduleA', [
      'USER_INFO'
    ]),
    gotoAbout () {
      this.$store.state.moduleA.userInfo = '>>>>'
      // this.$store.moduleA.state.userInfo = '>>>>>>'
      // this.USER_INFO('wkzzzzz')
      // this.$router.push({
      //   name: 'about',
      //   params: {
      //     id: '1766',
      //     name: 'wkz'
      //   }
      // })
      // this.$router.push({
      //   path: '/about',
      //   query: {
      //     id: '1766',
      //     name: 'wkz'
      //   }
      // })
    }
  },
  // 组件内路由 进入路由前，无法获取this，可通过next vm操作
  beforeRouteEnter (to, from, next) {
    // next((vm) => {
    //   console.log(vm)
    // })
    next()
  },
  // 组件内路由 路由更新前触发，可获取this
  beforeRouteUpdate (to, from, next) {
    this.info = 1
    next()
  },
  // 组件内路由 路由离开前触发，可获取this
  beforeRouteLeave (to, from, next) {
    this.info = 2
    next()
  }
}
</script>
